<template>
  <div>
    <mu-auto-complete :data="fruits" :max-search-results="6"  v-model="value6" open-on-focus avatar>
        <template slot-scope="scope">
          <mu-list-item-action>
            <mu-avatar color="pink500">
              {{scope.item.substring(0, 1)}}
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-content v-html="scope.highlight"></mu-list-item-content>
        </template>
    </mu-auto-complete>

    <mu-container style="width:100px;height:100px" color="pink500">
      <mu-paper class="demo-paper" :z-depth="1" color="pink500"></mu-paper>
      <mu-paper class="demo-paper" :z-depth="2"></mu-paper>
      <mu-paper class="demo-paper" :z-depth="3"></mu-paper>
      <mu-paper class="demo-paper" :z-depth="4"></mu-paper>
      <mu-paper class="demo-paper" :z-depth="5"></mu-paper>
    </mu-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value4: '',
      value5: '',
      value6: ''
    }
  }
}
</script>

<style scoped>

</style>
